<template>
  <section class="contentCon">
      <div><el-button icon="el-icon-back" class="back" @click="clickback">返回设备详情</el-button></div> 
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"><span style="line-height: 36px;">{{this.device_name}} 原始数据</span></div></el-col>
      </el-row>
      <el-tabs type="border-card">
        <el-tab-pane label="事件数据">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="jobEventSearch">
          </el-date-picker>
          <el-row>
            <el-col :span="24">
              <!--表格-->
              <el-table
                :data="tableEvent.slice((currentPageEvent - 1) * 20, currentPageEvent * 20)"
                border
                style="width: 100%">
                <el-table-column
                  prop="eventType"
                  label="事件种类"
                  width="90"
                  :formatter="formatEventType">
                </el-table-column>
                <el-table-column
                  prop="timestamp"
                  label="上报时间"
                  width="180"
                  :formatter="formatTimeEvent">
                </el-table-column>
                <el-table-column
                  prop="eventContent"
                  label="上报内容">
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  @current-change="handleCurrentChangeEvent"
                  :current-page="currentPageEvent"
                  :page-size="20"
                  layout="prev, pager, next, jumper"
                  :total="tableEvent.length">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane v-if="this.device_product_id" label="状态数据">
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="jobStatusSearch">
          </el-date-picker>
          <el-row>
            <el-col :span="24">
              <!--表格-->
              <el-table
                :data="tableStatus.slice((currentPageStatus - 1) * 20, currentPageStatus * 20)"
                border
                style="width: 100%">
                <el-table-column
                  prop="serviceId"
                  label="服务id"
                  width="90">
                </el-table-column>
                <el-table-column
                  prop="timestamp"
                  label="上报时间"
                  width="180"
                  :formatter="formatTimeStatus">
                </el-table-column>
                <el-table-column
                  prop="eventContent"
                  label="上报内容">
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  @current-change="handleCurrentChangeStatus"
                  :current-page="currentPageStatus"
                  :page-size="20"
                  layout="prev, pager, next, jumper"
                  :total="tableStatus.length">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
  </section>
</template>
<script type="text/ecmascript-6">
import debounce from 'lodash.debounce';
import { deviceDataService } from '@/services';
import utils from '@/utils.js';

export default {
  data () {
    var date = new Date();
    var lastDate = new Date(date - 1000 * 60 * 60 * 24 * 30);
    return {
      tableEvent: [],
      tableStatus: [],
      form: {
        deviceId: '',
        deviceName: '',
        imei: '',
        event: '',
        reportTime: '',
      },
      currentPageEvent: 1,
      currentPageStatus: 1,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [lastDate, date],
      value2: [lastDate, date],
      device_name: null,
      device_product_id: false,
    };
  },
  created () {
    this.queryDeviceEventData();
    this.queryDeviceStatusData();
  },
  methods: {
    jobEventSearch() {
      this.currentPageEvent = 1;
      this.queryDeviceEventData();
    },
    jobStatusSearch() {
      this.currentPageStatus = 1;
      this.queryDeviceStatusData();
    },
    clickback () {
      this.$router.go(-1);
    },
    handleCurrentChangeEvent(val) {
      this.currentPageEvent = val;
      console.log(`当前页: ${val}`);
    },
    handleCurrentChangeStatus(val) {
      this.currentPageStatus = val;
      console.log(`当前页: ${val}`);
    },
    queryDeviceEventData: debounce(async function() {
      const { event_list, device_name, is_aep_product } = await deviceDataService.queryDeviceEventData(this.$route.query.deviceId, this.value1[0].getTime(), this.value1[1].getTime());
      this.tableEvent = event_list;
      this.device_name = device_name;
      this.device_product_id = is_aep_product;
    }, 500),
    queryDeviceStatusData: debounce(async function() {
      this.tableStatus = await deviceDataService.queryDeviceStatusData(this.$route.query.deviceId, this.value2[0].getTime(), this.value2[1].getTime());
    }, 500),
    formatEventType(row, column) {
      if (!this.device_product_id) {
        //如果是中移设备
        if (row.eventType === 1) {
          return "上报数据";
        } else if (row.eventType === 2) {
          return "登录数据";
        } else {
          return "未知数据";
        }
      } else {
        if (!utils.isEmpty(row.eventType)) {
          return row.eventType + "(警告)";
        } else {
          return "(警告)";
        }
      }
    },
    formatTimeStatus(row, column) {
      return utils.timestampToTime(row.timestamp);
    },
    formatTimeEvent(row, column) {
      return utils.timestampToTime(row.createTime);
    },
  },
};
</script>
<style lang="scss">
.el-range-editor {
  margin-bottom: 20px;
}
</style>